<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Knight Bootstrap Template - Index</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <style>
    .slider {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      scroll-padding: 50%;
      width: 100%;
      padding: 0;
      scrollbar-width: thin;
      /* for Firefox */
      scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
      /* for Firefox */
    }

    .slider::-webkit-scrollbar {
      width: 5px;
      /* for Chrome, Safari, and Opera */
    }

    .slider::-webkit-scrollbar-thumb {
      background: rgba(155, 155, 155, 0.5);
      /* for Chrome, Safari, and Opera */
    }

    .slide {
      flex: 0 0 auto;
      margin-right: 16px;
      scroll-snap-align: start;
      border: 10px solid #f2f2f2;
      border-radius: 10px;
    }

    #scroll-content {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
    }

    .item-scroll {
      display: inline-block;
      width: 120px;
      /* 修改宽度 */
      padding: 10px;
    }
  </style>

</head>

<body>
  <div id="app">
    <!-- ======= Hero Section ======= -->
    <section id="hero">
      <div class="hero-container">
        <a href="index.html" class="hero-logo" data-aos="zoom-in"><img src="assets/img/hero-logo.png" alt=""></a>
        <h1 data-aos="zoom-in">Welcome To Knight Studios</h1>
        <h2 data-aos="fade-up">We are talented designers</h2>
        <a data-aos="fade-up" data-aos-delay="200" href="#portfolio" class="btn-get-started scrollto">Started</a>
      </div>
    </section><!-- End Hero -->

    <!-- ======= Header ======= -->
    <header id="header" class="d-flex align-items-center">
      <div class="container d-flex align-items-center justify-content-between">

        <div class="logo">
          <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>
        </div>

        <nav id="navbar" class="navbar" style="margin: auto;">
          <ul>
            <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
            <!-- <li><a class="nav-link scrollto" href="#about">About</a></li> -->
            <!-- <li><a class="nav-link scrollto" href="#services">Services</a></li> -->
            <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
            <!-- <li><a class="nav-link scrollto" href="#team">Team</a></li> -->
            <!-- <li><a class="nav-link scrollto" href="#pricing">Pricing</a></li> -->
            <!-- <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 2</a></li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
            </ul>
          </li> -->
            <!-- <li><a class="nav-link scrollto" href="#contact">Contact</a></li> -->
          </ul>
          <i class="bi bi-list mobile-nav-toggle"></i>
        </nav><!-- .navbar -->

      </div>
    </header><!-- End Header -->

    <main id="main">



      <!-- ======= Portfolio Section ======= -->
      <section id="portfolio" class="portfolio">
        <div class="container">

          <div class="section-title" data-aos="fade-up">
            <h2>Portfolio</h2>
            <p>Magnam dolores commodi suscipit eius consequatur ex aliquid fuga eum quidem</p>
          </div>

          <div class="row" data-aos="fade-up" data-aos-delay="100">
            <div class="col-lg-12 d-flex justify-content-center">
              <ul id="portfolio-flters">
                <li data-filter="*" class="filter-active">All</li>
                <li data-filter=".filter-app">App</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
                <li data-filter=".filter-nis">模拟</li>
                <li data-filter=".filter-app">App</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
                <li data-filter=".filter-nis">模拟</li>
                <li data-filter=".filter-app">App</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
                <li data-filter=".filter-nis">模拟</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
                <li data-filter=".filter-nis">模拟</li>
                <li data-filter=".filter-app">App</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
                <li data-filter=".filter-nis">模拟</li>
                <li data-filter=".filter-app">App</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
                <li data-filter=".filter-nis">模拟</li>
              </ul>
            </div>
          </div>

          <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">

            <div v-for="item in 20 " class="col-lg-2 col-md-6 portfolio-item filter-app">
              <div class="portfolio-wrap">
                <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>App 1</h4>
                  <p>App</p>
                  <div class="portfolio-links">
                    <a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery"
                      class="portfolio-lightbox" title="App 1"><i class="bx bx-plus"></i></a>
                    <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      <!-- <section id="clients" class="clients">
        <div class="container">
          <div class="row">
            <div id="scroll-content">
              <div v-for="item in 10" class="item-scroll">
                <img src="assets/img/clients/client-1.png" />
              </div>
            </div>
          </div>
        </div>
      </section> -->

    </main><!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer">

      <div class="footer-top">

        <div class="container">

          <div class="row justify-content-center">
            <div class="col-lg-6">
              <a href="#header" class="scrollto footer-logo"><img src="assets/img/hero-logo.png" alt=""></a>
              <h3>Knight</h3>
              <p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi
                placeat.</p>
            </div>
          </div>

          <!-- <div class="row footer-newsletter justify-content-center">
          <div class="col-lg-6">
            <form action="" method="post">
              <input type="email" name="email" placeholder="Enter your Email"><input type="submit" value="Subscribe">
            </form>
          </div>
        </div> -->

          <!-- <div class="social-links">
          <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
          <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
          <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
          <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
          <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
        </div> -->

        </div>
      </div>

      <div class="container footer-bottom clearfix">
        <div class="copyright">
          &copy; Copyright <strong><span>Knight</span></strong>. All Rights Reserved
        </div>
        <div class="credits">
          Designed by
        </div>
      </div>
    </footer><!-- End Footer -->

    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
        class="bi bi-arrow-up-short"></i></a>
  </div>
  <!-- Vendor JS Files -->
  <!-- 开发版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- <script  src="./main.js"  ></script> -->

  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

  <script>

window.addEventListener('load', () => {
  if (window.location.hash) {
      if (select(window.location.hash)) {
        scrollto(window.location.hash)
      }
    }
  });
  window.addEventListener('load', () => {    
  var scrollContent = document.getElementById('scroll-content'),
  scrollWidth = scrollContent.offsetWidth,
  scrollContentSpeed = 1, // 调整这个滚动速度 
  scrollContentDir = -1,
  scrollContentTimer;
  scrollContent.style.width = (scrollWidth * 2) + 'px';
  scrollContent.innerHTML += scrollContent.innerHTML;

  function startScrollContent() {
    if (!scrollContentTimer) {
      scrollContentTimer = setInterval(scrollContentSlide, 20);
    }
  }
  function stopScrollContent() {
    if (scrollContentTimer) {
      clearInterval(scrollContentTimer);
      scrollContentTimer = null;
    }
  }
  function scrollContentSlide() {
    scrollContent.scrollLeft += scrollContentDir * scrollContentSpeed;
    if (scrollContent.scrollLeft <= 0) {
      scrollContent.scrollLeft = scrollContent.scrollWidth / 2;
    }
    if (scrollContent.scrollLeft >= scrollContent.scrollWidth / 2) {
      scrollContent.scrollLeft = 0;
    }
  }
  startScrollContent();
  scrollContent.onmouseover = stopScrollContent;
  scrollContent.onmouseout = startScrollContent;  });

  </script>


  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: "Hello, Vue!",
        baseURL: 'http://127.0.0.1:8000',
      },
      created() {
        this.dataInfo()
      },
      methods: {
        dataInfo() {
          let result = this.getRequest('/home/index')
            .then(data => console.log(data)); // 获取并打印服务器的响应
          // var data = { username: 'example' }; // 需要传输到服务器的数据
          // postRequest('https://api.example.com/items', data)
          // .then(response => console.log(response)); 
        },

        getRequest(endpoint) {
          return new Promise((resolve, reject) => {
            let url = this.baseURL + endpoint;
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.onreadystatechange = function () {
              if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
              } else if (xhr.readyState === 4) {
                reject('Error: ', xhr.status);
              }
            };
            xhr.send();
          })
        },
        postRequest(endpoint, data) {
          return new Promise((resolve, reject) => {
            let url = this.baseURL + endpoint;
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
              if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
              } else if (xhr.readyState === 4) {
                reject('Error: ', xhr.status);
              }
            };
            xhr.send(JSON.stringify(data));
          })
        }
      },
    });
  </script>
</body>

</html>